import React, { useEffect, useState } from 'react'
import { getAddrList, detailStatic } from '../../../api/yjr/yjr_api'
import { EditSOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'


export default React.memo( function Address_book() {
  const navigate = useNavigate()
  const [list, setList] = useState<any>([])
  const getList = async () => {
    const res = await getAddrList()
    if (res.data.code == 200) {
      setList(res.data.addrData)
    }
  }

  const handleEdit = (id: string) => {
    navigate(`/edit/${id}`)
  }

  const setDefault = async (id: string) => {
    const res = await detailStatic({id})
    if (res.data.code == 200) {
      getList()
    }
  }

  useEffect(() => {
    getList()
  }, [])

  return (
    <div className='address_book'>

      {
        list.map((item: any) => {
          return (
            <div className='bok' key={item._id}>
              <div className='div_span'>
                {
                  item.title.title == '家' ?
                    <span className='school home'>{item.title.title}</span> :
                    item.title.title == '学校' ?
                      <span className='school company'>{item.title.title}</span> :
                      <span className='school'>{item.title.title}</span>
                }

                <span><b>{item.addr}</b></span>
              </div>
              <div style={{ marginTop: '1rem', position: 'relative' }}>
                <span className='name'>{item.name}</span>
                <span className='name' style={{ display: 'inline-block', marginLeft: '1rem' }}>+{item.phone}</span>
                <span className='edit'><EditSOutline onClick={() => handleEdit(item._id)} /></span>
                {
                  item.default ? <span className='default'>默认</span> : <span className='setDefault' onClick={() => setDefault(item._id)}>设为默认</span>
                }
              </div>
            </div>
          )
        })
      }

    </div>
  )
})

